<template>
    <view>
        <uni-swipe-action>
            <uni-swipe-action-item>
                <view class="content-box">
                    <checkbox-group
                        @change="checkboxChange"
                        class="cart-item-specs"
                        :class="{ oneSpec: getAppSet().isOneSpec, 'loast-item': isLast }">
                        <label class="item-left custom-checkbox-box" v-if="productInfo.SaleStatus != 1 && !isEdit">
                            <customDisableCheckbox></customDisableCheckbox>
                        </label>
                        <label class="item-left custom-checkbox-box" v-if="productInfo.SaleStatus == 1 || isEdit">
                            <checkbox
                                v-show="!getAppSet().isOneSpec"
                                class="checkbox-mark"
                                :value="String(productInfo.ID)"
                                :checked="isSelectedFn(selectData)">
                            </checkbox>
                            <custom-checkbox v-show="!getAppSet().isOneSpec" :isSelect="isSelectedFn(selectData)">
                            </custom-checkbox>
                        </label>
                        <view class="item-main-right">
                            <view class="item-main">
                                <view class="specs" v-if="productInfo.V_AttributeNameValue"
                                    ><text>规格:</text
                                    ><text class="specs-text">{{ productInfo.V_AttributeNameValue }}</text></view
                                >
                                <view class="price">
                                    <text class="price-text small">￥</text
                                    ><text class="price-text">{{ totalPrice() }}</text
                                    ><text class="unit-text">/{{ productInfo.UnitName }}</text>
                                </view>
                            </view>
                            <view class="item-right" v-if="productInfo.SaleStatus == 1">
                                <view class="input-number-box">
                                    <button
                                        class="number-btn btn-minus"
                                        :class="amount <= 0 ? 'color-shadow' : ''"
                                        @click="upNum(amount, -1)">
                                        -
                                    </button>

                                    <view class="btn-input-box" @click="showpop">
                                        {{ amount }}
                                    </view>

                                    <button
                                        class="number-btn btn-plus"
                                        :disabled="
                                            (amount >= productInfo.Stock ||
                                                amount + (productInfo.AddNum ? productInfo.AddNum : 1) >
                                                    productInfo.Stock) &&
                                            !getAppSet().NoCheckStock
                                        "
                                        @click="upNum(amount, 1)">
                                        +
                                    </button>

                                    <view class="stock-box" v-if="isShowDel">
                                        <text class="stock-text">库存:{{ productInfo.Stock }}</text>
                                        <uni-icons class="item-del" type="trash" v-if="isShowDel" @click="del">
                                        </uni-icons>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </checkbox-group>
                </view>
                <template v-slot:right>
                    <view class="slot-button" @click="delTip()">
                        <view class="left-border"></view>
                        <text class="slot-button-text" @click.stop="delTip()">删除</text>
                    </view>
                </template>
            </uni-swipe-action-item>
            <!-- 	<uni-popup ref="delTip" type="dialog">
			<uni-popup-dialog type="text" title="温馨提示" content="确定删除该商品?" :before-close="true" @close="close"
				@confirm="doDel"></uni-popup-dialog>
		</uni-popup> -->
        </uni-swipe-action>
        <uni-popup ref="popAmountTip" type="center" class="popAmountTip" :animation="false" :maskClick="true">
            <view class="pop-return-box">
                <view class="pop-return-title">
                    <text>输入订购数量</text>
                </view>
                <input confirm-type="search" type="digit" maxlength="10" v-model="popinputAmount" class="btn-input" />
                <view class="pop-action">
                    <view @click="popAmountClose">取消</view>
                    <view @click="popAmountConfirm">确定</view>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script>
import { updateSupplierCart } from "@/utils/cartUtil.js"
import utilsOld from "@/utils/utilsOld.js"
import customCheckbox from "@/components/common/custom-checkbox.vue"
import customDisableCheckbox from "@/components/common/custom-disable-checkbox.vue"
export default {
    components: {
        customCheckbox,
        customDisableCheckbox,
    },
    props: {
        selectData: {
            type: Object,
            default: {},
        },
        isShowCheckBox: {
            type: Boolean,
            default: true,
        },
        isShowDel: {
            type: Boolean,
            default: false,
        },
        isLast: {
            type: Boolean,
            default: false,
        },
        productInfo: {
            type: Object,
            default: {},
        },
        isEdit: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            selectNum: 0,
            stepStrictly: true,
            minBuyNum: 0,
            stepBuyNum: 1,
            selected: false,
            popinputAmount: "",
            amount: 0,
        }
    },
    watch: {
        productInfo(e) {
            this.amount = e.Amount
        },
    },
    watch: {
        productInfo(newVal) {
            this.amount = this.productInfo.Amount
        },
    },
    mounted() {
        this.amount = this.productInfo.Amount
    },
    methods: {
        showpop() {
            this.popinputAmount = this.amount
            this.$refs.popAmountTip.open()
        },
        popAmountClose() {
            this.$refs.popAmountTip.close()
        },
        popAmountConfirm() {
            this.amount = this.popinputAmount
            this.upNum(this.amount, 0)
            this.$refs.popAmountTip.close()
        },
        //数量变更
        upNum(amount, type) {
            amount = Number(amount)

            let addNum = this.productInfo.AddNum ? this.productInfo.AddNum : 1
            addNum = this.productInfo.Ratio == 1 ? addNum : 1
            let addN = amount % addNum
            if (type == 0) {
                let newNum = utilsOld.getMaxNum(amount, addNum, addN)
                if (newNum >= this.productInfo.Stock && !this.getAppSet().NoCheckStock) {
                    let stockMaxNum = this.productInfo.Stock - (this.productInfo.Stock % addNum)
                    amount = stockMaxNum
                    this.easyToast("已是最大库存")
                } else {
                    amount = newNum
                }
                if (amount < 0) {
                    amount = 0
                }
            } else {
                amount = amount + type * addNum
            }
            if (amount < this.productInfo.MinimumOrder || amount < 0) {
                amount = 0
            }
            this.amount = amount
            this.$forceUpdate()
            let obj = {
                ProductId: this.productInfo.ProductId,
                Amount: amount,
                UnitId: this.productInfo.UnitId,
                UnitName: this.productInfo.DefaultUnit,
                skuId: this.productInfo.SkuId,
                ratio: this.productInfo.Ratio,
            }
            if (!this.isShowDel) {
                let param = []
                param.push(obj)
                updateSupplierCart(param).then((res) => {
                    this.$forceUpdate()
                    this.$emit("upNum", this.productInfo)
                })
            } else {
                this.$emit("change", this.productInfo)
            }
        },
        //价格
        totalPrice() {
            return this.productInfo.V_FactPrice
        },
        //是否选中
        isSelectedFn(data) {
            let ids = data.ids
            let proIds = data.proIds

            let result = ids.find((item) => {
                return item == String(this.productInfo.ID)
            })
            if (result) {
                return true
            }
            return false
        },
        //选择
        checkboxChange(e) {
            this.$emit("checkboxChange", e, String(this.productInfo.ID))
        },
        //删除
        del() {
            this.$emit("del", this.productInfo)
        },
        close() {
            this.$refs.delTip.close()
        },
        doDel() {
            let obj = {
                ProductId: this.productInfo.ProductId,
                Amount: 0,
                UnitId: this.productInfo.UnitId,
                UnitName: this.productInfo.DefaultUnit,
                skuId: this.productInfo.SkuId,
                ratio: this.productInfo.Ratio,
            }
            let param = []
            param.push(obj)
            updateSupplierCart(param).then((res) => {
                this.$forceUpdate()
            })
            this.close()
        },
        delTip() {
            this.$emit("delTip", this.productInfo)
        },
    },
    computed: {
        maxBuyNumCom() {
            return 9999999999999
        },
    },
}
</script>

<style lang="scss">
.cart-item-specs {
    display: flex;
    flex-direction: row;
    // border-bottom: solid 1rpx $uni-bg-color-grey;
    padding: 6rpx 0;

    .item-left {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
    }

    .item-main-right {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // background: red;
        background: #f7f7f7;
        padding: 20rpx 24rpx;
    }

    .item-main {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-right: 20rpx;

        .specs {
            // margin-bottom: 14rpx;
            font-size: 28rpx;
            color: $color-gray-1;
        }
    }

    .item-right {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;

        .stock-box {
            margin-top: 14rpx;
            display: flex;
            flex-direction: row;
            width: 100%;
            align-items: center;

            .item-del {
            }

            .stock-text {
                display: flex;
                flex: 1;
            }
        }
    }

    .price {
        font-size: $font-size-20;
        color: $app-color-text-tip;
        display: flex;
        align-items: flex-end;
        margin-top: 4rpx;

        .price-text {
            font-size: $font-size-28;
            margin-right: 4rpx;
        }

        .small {
            font-size: $font-size-24;
            margin-bottom: 6rpx;
            margin-right: 0rpx;
        }

        .unit-text {
            color: $color-gray-3;
            margin-bottom: 6rpx;
            font-size: $font-size-26;
        }
    }
}

.loast-item {
    border-bottom: none;
}

.oneSpec {
    padding: 10rpx 0 $app-page-padding;
    border-bottom: none;

    .item-left {
        margin-right: 36rpx;
        width: 34rpx;
        margin-left: 12rpx;
    }
}

.slot-button {
    display: flex;
    flex-direction: row;
    background: #f0201f;
    width: 80rpx;
    border-radius: 0 12rpx 12rpx 0;
    border-left: 1rpx solid $color-white;

    .left-border {
        display: flex;
        height: 100%;
        width: 20rpx;
        background: $color-white;
        border-radius: 0 12rpx 12rpx 0;
        border-left: 1rpx solid $color-white;
        margin-left: -1rpx;
    }

    .slot-button-text {
        display: flex;

        height: 100%;
        background: #f0201f;
        color: $color-white;
        border-radius: 0 12rpx 12rpx 0;
        width: 12rpx;
        align-items: center;
        margin-left: 16rpx;
    }
}

.input-number-box {
    .number-btn {
        display: flex;
        justify-content: center;
        border: none;

        &:before {
            border: none;
        }

        &:after {
            border: none;
        }
    }
}

.specs {
    text {
        font-size: $font-size-30;
    }
}

.btn-input {
    font-size: $font-size-32 !important;
}
</style>
